<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <script src="../dist/claygl.js?2"></script>
        <script type="text/javascript" src="lib/dat.gui.js"></script>
    </head>
    <body style="margin:0px;">
        <canvas id="main"></canvas>
        <script type="text/javascript">
            var renderer = new clay.Renderer({
                canvas: document.getElementById('main')
            });
            var gbuffer = new clay.deferred.GBuffer({
                enableTargetTexture4: true
            });
            var camera = new clay.camera.Perspective({
                aspect: renderer.getViewportAspect()
            });
            camera.position.set(0, 0, 6);

            var timeline =  new clay.Timeline();
            timeline.start();
            var scene = new clay.Scene();

            var loader = new clay.loader.GLTF();
            loader.load('assets/models/suzanne/suzanne_high.gltf');
            var suzanneGeometry;
            loader.on('success', function(res) {
                suzanneGeometry = res.scene.getNode('Suzanne').geometry;

                var material = new clay.StandardMaterial({
                    metalness: 0.5,
                    uvRepeat: [3, 3],
                    roughness: 0.5
                });
                var mesh = new clay.Mesh({
                    geometry: suzanneGeometry,
                    material: material
                });
                mesh.geometry.generateTangents();

                [ ['diffuseMap', 'basecolor'], ['normalMap', 'normal'], ['metalnessMap', 'metalness'], ['roughnessMap', 'roughness'] ].forEach(function (mapInfo) {
                    var tex = new clay.Texture2D({
                        wrapS: clay.Texture.REPEAT,
                        wratT: clay.Texture.REPEAT
                    });
                    tex.load('assets/textures/iron-rusted4/iron-rusted4-' + mapInfo[1] + '.png')
                        .success(function () {
                            update();
                        });
                    material[mapInfo[0]] = tex;
                });

                mesh.scale.set(1.4, 1.4, 1.4);
                scene.add(mesh);

                update();
            });

            var control = new clay.plugin.OrbitControl({
                target: camera,
                domElement: renderer.canvas,
                timeline: timeline
            });

            control.on('update', update);

            function update() {
                scene.update();
                camera.update();
                gbuffer.update(renderer, scene, camera);
                gbuffer.renderDebug(renderer, camera, config.debugType);
            }

            window.onresize = function() {
                renderer.resize(window.innerWidth, window.innerHeight);
                gbuffer.resize(
                    renderer.getWidth() * renderer.getDevicePixelRatio(),
                    renderer.getHeight() * renderer.getDevicePixelRatio()
                );
                camera.aspect = renderer.getViewportAspect();
            };
            window.onresize();

            var config = {
                debugType: 'normal'
            }
            var gui = new dat.GUI();

            gui.add(config, 'debugType', [
                'normal', 'depth', 'position', 'glossiness', 'metalness', 'albedo', 'velocity'
            ]).onChange(function () {
                update();
            });

            update();
        </script>
</html>